<template>
  <div class="app-container">
    <div class="item2">
      <div class="header">
        <div class="title1">
          <i class="el-icon-data-analysis"></i><span>滑道口查询</span>
        </div>
        <div class="backB">
          <img src="@/assets/images/back.png" alt="" @click="goBack" />
        </div>
      </div>
      <div class="scanner">
        <div class="barcodetext">任务编号：</div>
        <el-input
          v-model="barCode"
          ref="barcodeInput"
          placeholder="请输入任务编号"
          @change="bChandleQuery"
        />
        <el-button
          type="primary"
          class="btn"
          icon="el-icon-search"
          size="medium"
          @click="bChandleQuery"
          >搜索</el-button
        >
      </div>
      <el-table
        :data="bCtableData"
        border
        height="680"
        v-loading="bCloading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :header-cell-style="{ background: '#1890ff', color: '#ffffff' }"
      >
        <el-table-column align="center" prop="taskNo" label="任务编号">
        </el-table-column>
        <el-table-column align="center" prop="scantime" label="扫码时间">
        </el-table-column>
        <el-table-column align="center" prop="resourceNode" label="BCR名称">
        </el-table-column>
        <el-table-column align="center" prop="status" label="道口">
        </el-table-column>
      </el-table>
    </div>
    <VueBarcodeScanner :result="barCode" />
  </div>
</template>

<script>
import { getwcsList } from "@/api/subSystem/continer";
import VueBarcodeScanner from "vue-barcode-scanner";
export default {
  components: {
    VueBarcodeScanner,
  },
  data() {
    return {
      barCode: null,
      bCtableData: [],
      bCloading: false,
    };
  },
  mounted() {
    this.$refs.barcodeInput.focus();
  },
  methods: {
    goBack() {
      this.$router.push("/subSystem1");
    },
    bChandleQuery() {
      if (this.barCode) {
        this.bCloading = true;
        getwcsList(encodeURIComponent(encodeURIComponent(this.barCode))).then(
          (res) => {
            this.bCtableData = res.data;
            this.bCloading = false;
          }
        );
      } else {
        this.$modal.msgError("请输入任务编号");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  // width: 100%;
  // height: 100%;
  // background: url("../assets/images/hcbanner1.jpg") no-repeat;
  .el-icon-data-analysis::before {
    color: #00d9ff;
    margin-right: 8px;
  }
  .header {
    margin-top: -10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 220px;
      margin-right: 20px;
    }

    .backB {
      cursor: pointer;

      img {
        width: 20%;
      }
    }
  }
  .scanner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 62px;
  }

  .btn {
    margin-left: 20px;
  }

  .barcodetext {
    width: 80px;
    color: #606266;
    font-size: 14px;
    font-weight: 700;
  }

  .title1 {
    font-size: 16px;
    // margin-bottom: 15px;
    color: #808080;
    width: 170px;
    padding: 5px;
    border-bottom: 1px dotted #8ddfff;
  }
  ::v-deep .el-input--medium {
    width: 217px;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 14px; // 横向滚动条
    height: 14px; // 纵向滚动条 必写
  }
}
</style>